class DomMask {
  className = 'dom-mask_hd2024'

  constructor() {}

  getStyle(this:DomMask) {
    const style = `
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2000;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        overflow: auto;
    `

    return style.replace(/\s/g,'')
  }

  getTip(this:DomMask, tip = '') {
    const tipContent = `<div style="position: fixed;top:10px;right: 0;left: 0;overflow: auto;text-align:center;z-index:2014;">
      <h1 style="display:inline;background:#fff;color:#30a46c;">${tip}</h1>
    </div>`

    return tipContent.trim()
  }

  createDom(this:DomMask, tip = '') {
    const boxDom = document.createElement("div")
    boxDom.className = `${this.className}`
    boxDom.style.cssText = this.getStyle()
    boxDom.insertAdjacentHTML('afterbegin', this.getTip(tip))
    return boxDom
  }

  insertDom(this:DomMask, dom:Element) {
    document.body.appendChild(dom)
  }

  delSelfDom(this:DomMask, dom:Element) {
    dom.parentElement?.removeChild(dom)
  }

  delAllDom(this:DomMask){
    const dom = document.querySelector(`.${this.className}`)
    dom && this.delSelfDom(dom)
  }

  open(this:DomMask, tip = '') {
    this.close()
    this.insertDom(this.createDom(tip))
  }

  close(this:DomMask) {
    this.delAllDom()
  }
}

/** message 弹窗 */
export const DomMaskInstance = new DomMask()